<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>送货上门订单管理</title>
    <link rel="stylesheet" href="/static/lib/layui-v2.5.6/layui-v2.5.6/layui/css/layui.css">
    <style>
        .layui-table-cell{
            height:36px;
            line-height: 36px;
        }
        .info{
            font-size: 14px;
            color: rgb(110, 108, 108);
            line-height: 36px;
        }
        .layui-icon{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <table id="demo" lay-filter="test"></table>


<!-- 订单详细页面 -->
    <div id="orderDetails" style="display: none;">
        <div class="layui-form-item">
            <label class="layui-form-label">订单号</label>
            <div class="layui-input-block id_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block userid_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户ID</label>
            <div class="layui-input-block buyerid_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">订单时间</label>
            <div class="layui-input-block createdate_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">订单状态</label>
                <div class="layui-input-block orderstatus_info1 info"></div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">付款方式</label>
                <div class="layui-input-block paymethod_info1 info"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">付款订单</label>
              <div class="layui-input-inline payorderid_info1 info"></div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">付款时间</label>
              <div class="layui-input-inline paydate_info1 info"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">机器ID</label>
              <div class="layui-input-inline machineid_info1 info"></div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">格子柜号</label>
              <div class="layui-input-inline containernumber_info1 info"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系方式</label>
            <div class="layui-input-block phone_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">送货地址</label>
              <div class="layui-input-inline Addressid_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">详细地址</label>
            <div class="layui-input-block Address_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">订单总价</label>
            <div class="layui-input-block amount_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block comment_info1 info"></div>
        </div>

        <table class="layui-table" lay-skin="line">
            <thead>
                <tr>
                  <th>商品名称</th>
                  <th>商品规格</th>
                  <th>商品单价</th>
                  <th>商品数量</th>
                </tr> 
            </thead>
            <tbody id="commodities_info1"></tbody>
        </table>

    </div>


    <script type="text/html" id="barDemo">
        <i class="layui-icon layui-icon-ok" lay-event="getorderDetails_1" title="确认配送订单"></i>
        <i class="layui-icon layui-icon-tabs" lay-event="orderDetails_1" title="订单详情"></i>
    </script>

    
    <script src="/static/lib/layui-v2.5.6/layui-v2.5.6/layui/layui.js"></script>
    <script>
        
        
        layui.use(['table','laydate','util'], function(){
            var $ = layui.jquery;
            var table = layui.table;
            var laydate =layui.laydate;
            var util = layui.util;

            table.render({
                elem: '#demo',
                height: 'full-60',
                method: 'get',
                                //TODO:
                url: '/admin/bookOrderAdmin/getDoorOrderList', //数据接口
                page: {layout: ['prev', 'page', 'next', 'skip']}, //开启分页
                toolbar: '#toolbarDemo',
                defaultToolbar: [],
                id: 'order',
                cols: [[ //表头
                {field: 'id', title: '订单号', width:'19%', fixed: 'left'},
                {field: 'nickname', title: '用户名', templet:"<div>{{ d.user.nickname }}</div>", width:'15%',},
                {field: 'create_date', title: '订单时间', templet:"<div>{{layui.util.toDateString(Number(d.create_date), 'yyyy.MM.dd HH:mm:ss')}}</div>", width:'15%', sort: true},
                {field: 'phone', title: '联系方式', width: '12%', templet:"<div>{{ d.user.phone }}</div>"},
                {field: 'address', title: '送货地址', templet:"<div>{{ d.user.deliveryAddress.address }}</div>"},
                {field: 'order_status', title: '订单状态', width: '10%', templet:'<div>{{orderstatusfun(d.order_status)}}</div>',},
                {fixed: 'right', width:'7%', align:'center', toolbar: '#barDemo'}
                ]],


                parseData: function(res){ //res 即为原始返回的数据
                    return {
                    "code": res.success, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list //解析数据列表
                    };
                },
                request: {
                    pageName: 'pageNum', //页码的参数名称，默认：page
                    // limitName: 'pageSize' //每页数据量的参数名，默认：limit
                },
                response: {
                    // statusName: 'success', //规定数据状态的字段名称，默认：code
                    statusCode: true //规定成功的状态码，默认：0
                }
            });
        
            table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                if(layEvent === 'orderDetails_1'){
                    console.log(data)
                    $(".id_info1").html('<span style="color: #f173e1;">'+data.id+'</span>')
                            $(".userid_info1").html(data.user.nickname)
                            $(".buyerid_info1").html(data.user.id)
                            $(".createdate_info1").html(ctime(data.create_date))
                            $(".orderstatus_info1").html(orderstatusfun(data.order_status))
                            $(".machineid_info1").html(data.machine_id)
                            $(".containernumber_info1").html(status(data.container_number))
                            $(".amount_info1").html('<span style="color: #f173e1;">'+data.amount+'</span>')
                            $(".comment_info1").html(data.comment)
                            $(".paymethod_info1").html(paymethodfun(data.pay_method))
                            $(".payorderid_info1").html(status(data.pay_order_id))
                            $(".paydate_info1").html(ctime(data.pay_date))
                            $(".phone_info1").html(data.user.phone)
                            if (data.machine_id == 1) {
                                $(".Addressid_info1").html(data.machine.place)
                                $(".Address_info1").html(data.user.deliveryAddress.address)
                            } else {
                                $(".Addressid_info1").html(data.machine.place)
                                $(".Address_info1").html(data.machine.place_address)
                            }
                            
                            var commodities = data.commodities
                            if (commodities.length != 0) {
                                var flag = ''
                                for (var i = 0; i < commodities.length; i++) {
                                    var flag1 = '<tr><td>'+ commodities[i].commodityName +'</td><td>'+ commodities[i].specifications +'</td><td>'+ commodities[i].price +'</td><td>'+ commodities[i].count +'</td></tr>' 
                                    flag += flag1
                                }
                                $("#commodities_info1").html(flag)
                            }
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['66%', '90%'], //宽高
                        title: '预约订单详细',
                        btn: ['确认配送','关闭'],
                        content: $('#orderDetails'),
                        yes:function(index){
                            $.ajax({
                            type: "post",
                            url: "/admin/bookOrderAdmin/determineFinishDoorToDoorOrder",
                            data: {bookOrderID: data.id ,machineID: data.machine.id},
                            dataType: "json",
                            success: function(mag){
                                layer.msg(mag.message)
                                layer.close(index);
                                table.reload('order');
                            }
                        })
                        }
                    });

                }else if(layEvent === 'getorderDetails_1'){
                    layer.confirm('确定订单配送完成？', function(index){
                        $.ajax({
                            type: "post",
                            url: "/admin/bookOrderAdmin/determineFinishDoorToDoorOrder",
                            data: {bookOrderID: data.id ,machineID: data.machine.id},
                            dataType: "json",
                            success: function(mag){
                                layer.msg(mag.message)
                                layer.close(index);
                                table.reload('order');
                            }
                        })
                    })
                }
            });
        
        
        });
        function ctime(num) {
            if (num == null) {
                var ctime = '订单未完成'
            }else {
                var ctime = layui.util.toDateString(Number(num), "yyyy.MM.dd HH:mm:ss")
            }
            return ctime
        }
        function status(num) {
            if(num == null) {
                var status = '订单未完成'
            }else {
                var status = num
            }
            return status
        }
        function orderstatusfun(num) {
            if (num == 0) {
                var orderstatus = '未付款'
            }else if (num == 1) {
                var orderstatus = '<span style="color: rgb(222, 130, 235);">未发货</span>'
            }else if (num == 2) {
                var orderstatus = '未取货'
            }else if (num == 3) {
                var orderstatus = '订单完成'
            }else if (num == 6) {
                var orderstatus = '取消订单'
            }else if (num == 8) {
                var orderstatus = '退款订单'
            }else if (num == 9) {
                var orderstatus = '订单已退款'
            }else{
                var orderstatus = '订单未完成'
            }
            return orderstatus
        }
        function paymethodfun(num) {
            if (num == '0') {
                var paymethod = '支付宝'
            }else if (num == '1'){
                var paymethod = '微信'
            }else if (num == '2'){
                var paymethod = '账号余额'
            }else {
                var paymethod = '其他支付方式'
            }
            return paymethod
        }
        
    </script>
</body>
</html>